<template>
  <div style="display: flex;">
    <el-form-item label="投诉类型检索：">
           <el-select
              v-model="params.target"
              placeholder="请选择投诉部门"
              style="width: 240px"
              @change="getTableData">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
            </el-select>
            <el-button plain type="primary" @click="{params.state = ! params.state; getTableData()}" style="margin-left: 10px;">
              <p v-if="!params.state">仅显示未处理</p>
              <p v-else>显示全部记录</p>
            </el-button>
    </el-form-item>
  </div>
  <el-table :data="tableData.records" style="width: 100% ;height: 77vh;">
    <el-table-column prop="target" label="投诉部门" width="auto"/>
    <el-table-column prop="content" label="投诉原因" width="700px"/>
    <el-table-column prop="state" label="是否整顿" width="auto">
      <template #default="scoped">
        <p v-if="scoped.row.status" style="color: green;">已整顿</p>
        <p v-else  style="color: red;">未整顿</p>
      </template>
    </el-table-column>
    <el-table-column  label="操作" width="auto">
      <template #default="scoped">
        <el-button v-if="!scoped.row.status" @click="changeState(scoped.row.id,scoped.row.status)" plain type="primary">已整顿</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination 
    style="margin-top: 10px;" 
    background
    :page-count="tableData.pages"
    v-model:current-page="params.pageNo"
    @current-change="getTableData"
    :total="tableData.total">
  </el-pagination>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import path from './path'
let tableData = ref({})
// 分页的数据，作为分页查询get的参数
const params = reactive({
  pageNo : 1,
  pageSize: 12,
  target: null,
  state: false
})

const options = reactive([
  {value:'物业',label:'物业'},
  {value:'安保',label:'安保'},
  {value:'商店',label:'商店'},
])
// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  get(path.list,params,content => {
    tableData.value = content
  })
}
function changeState(id,state,key){
  ElMessageBox.confirm('您确定已经整顿了么，一但确认将无法修改！','警告',{
    type:'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(()=>{
      post(path.changeState,{id,state,key},content =>{
        getTableData()
      })
  }).catch(()=>{})
}
</script>

<style scoped lang='scss'>

</style>